<template>
	<view class="Lu-shang-box">
		<view class="Lu-shang-title">
			<view class="Lu-shang-name">商家名称</view>
			<input type="text" placeholder="请输入商家名称" placeholder-style="color:#999999" v-model="shangname"/>
		</view>
		<view class="Lu-shang-title">
			<view class="Lu-shang-name">经营种类</view>
			<picker class="Lu-agent-inputname" @change="typePickerChange" :value="typearray[typeindex].id" :range="typearray" range-key="name">
				<view class="uni-input" :class="{ 'active':typeindex != 0}">{{typearray[typeindex].name}}</view>
			</picker>
		</view>
		<view class="Lu-shang-title">
			<view class="Lu-shang-name">商家介绍</view>
			<input type="text" placeholder="请输入商家介绍" placeholder-style="color:#999999" v-model="shangintroduce"/>
		</view>
		<view class="Lu-shang-title">
			<view class="Lu-shang-name">店铺地址</view>
			<input type="text" placeholder="请输入店铺地址" placeholder-style="color:#999999" v-model="shangaddress"/>
		</view>
		<view class="Lu-shang-title">
			<view class="Lu-shang-name">联系电话</view>
			<input type="text" placeholder="请输入联系电话" placeholder-style="color:#999999" v-model="shangphone"/>
		</view>
		<view class="Lu-shang-title1 clearfix">
			<view class="Lu-shang-name fl">商家背景图</view>
			<view class="Lu-agent-name1 fr">需上传1张商家图片</view>
			<view v-if="shangPic != ''">
				<image :src='apiUrl + shangPic'></image>
			</view>
			<view v-else class="Lu-shang-btn">
				<button class="Lu-shang-upload" @click="upload"></button>
			</view>
		</view>
		<view class="Lu-shang-btn1">
			<button class="Lu-shang-submit" @click="shangsubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		data(){
			return{
				shangname:'',
				shangtype:'',
				shangintroduce:'',
				shangaddress:'',
				shangphone:'',
				typearray:['请选择您的经营类型','教育','健身'],
				typeindex:0,
				shangPic:'',
				shangid:''
			}
		},
		onLoad: function(option) {
			this.shangid = option.id;
			this.getXiugaishang()
			
			uni.request({
				url:this.apiUrl +'api/get_column',
				data:{
				
				},
				header:{
					openid:this.openId
				},
				method:'POST',
				success: (res) => {
					
					this.typearray = res.data.data
					console.log( this.typearray )
				}
			})
		},
		methods:{
			typePickerChange:function(e){
				this.shangtype = this.typearray[e.target.value]
				this.typeindex = e.target.value
				console.log(e)
			},
			upload:function(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
						const _this = this
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: this.apiUrl +'api/bannerImg', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                // 'user': 'test'
				            },
				            success: (res) => {
								console.log(JSON.parse(res.data).data.src)
								_this.shangPic = JSON.parse(res.data).data.src
				            }
				        });
				    }
				});
			},
			getXiugaishang:function(){
				if(this.shangid != ''){
					uni.request({
						url:this.apiUrl +'api/get_agent_info',
						data:{
							agent_id:this.shangid
						},
						header:{
							openid:this.openId
						},
						method:'POST',
						success: (res) => {
							this.shangname = res.data.data.name,
							this.typeindex = res.data.data.column_id,
							this.shangintroduce =res.data.data.describe,
							this.shangaddress = res.data.data.address,
							this.shangphone = res.data.data.phone,
							this.shangPic = res.data.data.pic
						}
					})
				}
			},
			shangsubmit:function(){
				uni.request({
					url:this.apiUrl +'api/add_agent',
					data:{
						agent_name:this.shangname,
						agent_phone:this.shangphone,
						agent_address:this.shangaddress,
						column_id:this.typeindex,
						describe:this.shangintroduce,
						pic:this.shangPic
					},
					header:{
						openid:this.openId
					},
					method:'POST',
					success: (res) => {
						if(res.data.msg == '成功'){
							uni.showToast({
								title:'提交成功',
								content:'提交成功',
								success: function (res) {
								    uni.navigateTo({
								    	url:'/pages/personal/business'
								    })
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.active{
		color: #333333 !important;
	}
	.Lu-shang-box{
		.Lu-shang-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 50rpx;
			background-color: #fff;
			margin: 20rpx 0;
			.Lu-shang-name{
				font-size: 30rpx;
				color: #333333;
			}
			.Lu-agent-inputname,input{
				font-size: 26rpx;
				color: #333333;
				text-align: right;
				view{
					color: #999999;
				}
			}
			.Lu-agent-name1{
				font-size: 26rpx;
				color: #999999;
				text-align: right;
			}
		}
		.Lu-shang-title1{
			padding: 30rpx 50rpx;
			background-color: #fff;
			margin: 20rpx 0;
			.Lu-shang-name{
				font-size: 30rpx;
				color: #333333;
			}
			.Lu-agent-inputname,input{
				font-size: 26rpx;
				color: #333333;
				text-align: right;
				view{
					color: #999999;
				}
			}
			.Lu-agent-name1{
				font-size: 26rpx;
				color: #999999;
				text-align: right;
			}
			.Lu-shang-btn{
				width: 132rpx;
				height: 126rpx;
				margin: 0 auto;
				margin-top: 52rpx;
				.Lu-shang-upload{
					background-image: url(~@/static/image/upload.png);
					background-size: 132rpx 126rpx;
					background-repeat: no-repeat;
					width: 132rpx;
					height: 126rpx;
				}
			}
		}
		.Lu-shang-btn1{
			margin: 20rpx auto;
			// margin-top: 20rpx 0;
			width: 610rpx;
			height: 90rpx;
			button::after{
				border:none;
			}
			.Lu-shang-submit{
				width: 610rpx;
				height: 90rpx;
				background-image: url(~@/static/image/shangbg.png);
				background-repeat: no-repeat;
				background-size: 610rpx 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 36rpx;
				color: #fff;
			}
		}
	}
</style>
